<template>
    <div class="loginContainer">
        <div class="loginContent">
            <div class="top">登录</div>
            <el-divider class="divider" />
            <div class="formContent">
                <el-form ref="ruleFormRef" :label-position="labelPosition" :model="loginForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginForm.username"  />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginForm.password" type="password"  autocomplete="off" />
                    </el-form-item>
                    <el-button class="btn" type="primary" @click="submit(ruleFormRef)">登录</el-button>
                </el-form>
            </div>
            
        </div>
    </div>
</template>
<script >
import {ref,reactive,getCurrentInstance, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
    setup(){
        let loginForm = reactive({
            username:'',
            password:''
        })
        let rules= ref({
            username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
            password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
        })
        const ruleFormRef=ref(null); //vue3中使用ref获取元素，必须通过ref声明和定义
        const labelPosition=ref('left')

        //路由跳转必须配置此
        const router = useRouter() 
        const route = useRoute()

        const submit=()=>{
            console.log('vvvvv',ruleFormRef)
            ruleFormRef.value.validate((valid) => {
                if (valid) {
                    console.log('submit!')
                    localStorage.setItem('username',loginForm.username)
                    router.push('/home')

                } else {
                    console.log('error submit!')
                }
            })
        }
        return {
            loginForm,
            rules,
            labelPosition,
            ruleFormRef,
            submit

        }
    }
}
</script>
<style lang="less" scoped>
.loginContainer{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: url('../../assets/login/ic_bg.jpg') no-repeat center;
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .top{
        font-size:22px;
        height:45px;
        text-align: center;
        line-height:45px;
        color:#333;
        font-weight:600;
        // margin-bottom:12px;
    }
    .divider{
        margin:12px 0;
    }
    .loginContent{
        width:300px;
        // height:220px;
        // border:1px solid red;
        border-radius: 16px;
        background-color:#fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .formContent{
            width:260px;
            margin:12px 0 24px;
            .btn{
                width:100%;
            }
        }
    }
}
</style>